<template>
  <el-dialog
    title="角色权限设置"
    :visible="isShow"
    width="500px"
    @close="closeEvent"
  >
    <!-- 默认勾选(它会累加),它不需要el-tree渲染完成后再使用
     1：node-key="id"
     2:配制:default-checked-keys="[需要勾选项的id]"
     通过el-tree组件内的一个方法设置  setCheckedKeys([需要勾选项的id])，需要el-tree渲染完成后才能使用
     1:node-key="id"
     2:el-tree  ref="tree"
     3:设置：this.$refs.tree.setCheckedKeys([需要勾选项的id])
     4：获取：this.$refs.tree.getCheckedKeys()

   -->
    <el-tree
      ref="tree"
      check-strictly
      node-key="id"
      :default-checked-keys="defaultKeys"
      show-checkbox
      :data="list"
      :props="{ label: 'name', children: 'children' }"
    />

    <template #footer>
      <div>
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { sysPermission } from '@/api/permission'
import { changeData } from '@/utils/index'
import { sysRoleId, sysRoleAssignPrem } from '@/api/setting'
export default {
  //   model: {
  //     prop: 'isShow',
  //     event: 'input'
  //   },
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      //   isShow: false
      list: [],
      defaultKeys: [],
      id: ''
    }
  },
  methods: {
    closeEvent() {
      //   this.$emit('input', false)
      this.$emit('update:isShow', false)
      //   还原勾选
      this.$refs.tree.setCheckedKeys([])
    },
    // 权限列表数据获取
    async getData() {
      if (this.list.length === 0) {
        const res = await sysPermission()
        this.list = changeData(res.data, '0')
        console.log('权限列表', res)
      }
    },
    async getRoleIds(id) {
      this.id = id
      const res = await sysRoleId(id)
      console.log('权限数据获取', res)
      //   默认勾选项不靠谱，它会累加勾选相应的值
      //   this.$refs.tree.setCheckedKeys(res.data.permIds)
      this.defaultKeys = res.data.permIds
    },
    // changeData(arr, str = '0') {
    //   return arr.filter((item) => {
    //     if (item.pid === str) {
    //       item.children = this.changeData(arr, item.id)
    //       return true
    //     }
    //   })
    // }
    // 确定点击
    async submit() {
      await sysRoleAssignPrem({
        id: this.id,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.$message.success('分配权限成功')
      this.closeEvent()
      console.log(this.$refs.tree.getCheckedKeys())
    }
  }
}
</script>
<style></style>
